<template>
  <main>
      <header class="uk-container">
            <nav class="navbar uk-navbar-container uk-navbar-transparent" uk-navbar>
                <div class="uk-navbar-left">
                    <a class="uk-navbar-item uk-logo" href="#">Logo</a>
                </div>
                <div class="uk-navbar-center">
                    <a href="" class="uk-navbar-item uk-logo"></a>
                </div>
                <div class="uk-navbar-right">
                    <div class="uk-inline header-action">
                        <a class="uk-text-muted uk-flex uk-flex-middle">
                            <img class="avatar uk-border-circle" src="https://picsum.photos/80" width="32" height="32" alt="">
                            <span>PCDotFan</span>
                        </a>
                        <div uk-dropdown>
                            <ul class="uk-nav uk-dropdown-nav">
                                <li><a href="#">个人信息</a></li>
                                <li><a @click="logout">退出登录</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
      </header>
      <section class="main-content uk-container">
          <div class="content-header">
              <h3 class="title uk-text-bold">学生列表</h3>
              <span class="total uk-text-muted" v-text="`总计 ${students.length} 条数据`"></span>
          </div>
          <div class="uk-grid-medium uk-child-width-1-1 uk-child-width-1-2@s" uk-grid>
                <article class="student-list-card" v-for="(student, index) in students" :key="index">
                    <div class="uk-card uk-card-default">
                        <div class="uk-grid-medium uk-flex-middle" uk-grid>
                            <div class="uk-width-auto">
                                <img class="uk-comment-avatar" :src="student.sex === true ? `/avatars/men/${student.id}.jpg` : `/avatars/women/${parseInt(student.id) - 50}.jpg`" width="80" height="80" :alt="student.name">
                            </div>
                            <div class="uk-width-expand">
                                <h3 class="title uk-margin-remove"><a class="uk-link-reset" href="#" v-text="student.name"></a></h3>
                                <p class="meta">
                                    <span :class="student.sex === true ? 'uk-label' : 'uk-label uk-label-danger'" v-text="student.sex === true ? '男' : '女'"></span>
                                    <span class="uk-label" v-if="student.meta" v-text="student.meta"></span>
                                </p>
                            </div>
                            <div class="action">
                                <a class="uk-text-primary" href="#"><i uk-icon="icon: file-edit; ratio: 0.75"></i> 编辑</a>
                                <a class="uk-text-danger" @click="removeItem(student.id)"><i uk-icon="icon: trash; ratio: 0.75"></i> 删除</a>
                            </div>
                        </div>
                    </div>
              </article>
          </div>
      </section>
      <add-student-form @refet="refetchData" />
  </main>
</template>

<script>
  import AddStudentForm from './AddStudentForm'

  export default {
    name: 'home',
    components: { AddStudentForm },
    data () {
      return {
          refresh: + new Date()
      }
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      refetchData() {
        this.refresh = + new Date()
      },
      logout() {
        this.$router.push('/login')
      }
    }
  }
</script>

<style lang="less" scoped>
.main-content {
    background: #f5f5f5;
    margin-top: 20px;
}

header {
    box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
    background: #fff;
    padding-bottom: 20px;

    .header-action {
        .avatar {
            margin-right: 5px;
        }
    }
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
        margin: 0;
        font-size: 24px;
    }
}

.student-add-button i {
    padding-right: 5px;
    padding-bottom: 2px;
}

.student-list-card {
    .action {
        padding-right: 20px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;

        a {
            margin-left: 10px;
        }

        i {
            position: relative;
            bottom: 1px;
        }
    }
    .modified-time {
        font-size: 13px;

        h4 {
            font-size: 14px;
            padding-bottom: 3px;
        }
    }
    .meta {
        margin-top: 5px;

        span {
            margin-right: 5px;
        }
    }
}
</style>
